<template>
	<!-- 顶部区域 -->
	<view class="top">
		<input placeholder="请输入待办事项" v-model="value" />
		<view class="create-button" v-on:click="handleCheck()">添加</view>
	</view>
	<!-- 底部区域 -->
	<view class="buttom">
		<view class="title">待办事项</view>
		<view v-for="item in showList" :key="item.id">
			<view class="todo" v-if="item.status === 'doing'">
				<checkbox v-on:click="doingHandle(item.id)"></checkbox>
				{{item.value}}
			</view>
		</view>
		<view class="title">已办事项</view>
		<view v-for="item in showList" :key="item.id">
			<view class="done content" v-if="item.status === 'finished'">
				<checkbox checked="true" v-on:click="doneHandle(item.id)"></checkbox>
				{{item.value}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showList: [], //展示的列表{id value status}
				value: null,  //输入内容
			}
		},
		onLoad() {

		},
		methods: {
			 // 代办事项的添加
			handleCheck() {
				this.showList.push({
					id: this.showList.length + 1,
					value: this.value,
					status: 'doing'
				})
			},
			// 代办事项的状态修改。
			doingHandle(id) {
				var item = this.showList.find((item) => item.id === id)
				item.status = 'finished' // 修改状态为done
			},
			doneHandle(id) {
				var item = this.showList.find((item) => item.id === id)
				item.status = 'doing' // doing
			}
		}
	}
</script>

<style>
	/* 顶部区域 */
	.top {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 15rpx 0 15rpx 0;
		border-bottom: 1rpx #959595 dashed;
	}

	.top input {
		width: 70%;
		margin-left: 20rpx;
	}

	.top view {
		border: 1rpx solid #666666;
		background-color: #fff;
		border-radius: 50rpx;
		width: 100rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.buttom {
		margin: 30rpx;
	}

	.buttom .title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.buttom .todo,
	.buttom .done {
		width: 100%;
		height: 70rpx;
		background-color: #dcdcdc;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-top: 20rpx;
	}

	.content {
		text-decoration: line-through;
		/* 添加删除线 */
	}

	.buttom checkbox {
		margin: 0 15rpx;
	}
</style>